<template>
  <div style="background: linear-gradient(180deg, cornflowerblue 0, 20%, #fff 100%);">
    <headerCom ref="header"></headerCom>
    <!-- 表单信息-->
    <div class="app-box">
      <header class="whiteBox paddingBox ">
        <div class="title">添加企业信息：</div>
      </header>
      <el-divider class="divi-der"></el-divider>
      <!-- 表单提交-->
      <div class="whiteBox " style="padding: 20px">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12" :xs="24">
              <el-form-item label="企业名称：" prop="companName">
                <el-input v-model="form.companName" placeholder="请输入完整企业名称" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" :xs="24">
              <el-form-item label="所属地区：" v-model="form.enterpriseAddress">
                <el-select v-model="myprovince" placeholder="请选择省" @change="handleChangesheng">
                  <el-option
                      v-for="item in myArea"
                      :key="item.value"
                      :label="item.label"
                      :value="item">
                  </el-option>
                </el-select>
                <el-select v-model="mycity" placeholder="请选择市" @change="handleChangeshi">
                  <el-option
                      v-for="item in mycityQuery"
                      :key="item.value"
                      :label="item.label"
                      :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :xs="24">
              <el-form-item label="企业评分：">
                <!-- 评分-->
                <el-rate
                    :value="value"
                    @input="(val)=>value=val"
                    show-score
                    text-color="#ff9900"
                    :max="5"
                    allow-half
                    :score-template="`${value*2}分`">
                </el-rate>
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="曾任职位：">
                <el-select v-model="form.youWork" placeholder="请选择曾任职位">
                  <el-option :label="item.name" :value="item.name" v-for="item in zhiweiList"
                             :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!--注册时间-->
          <el-row>
            <el-col :span="12" :xs="24">
              <div class="grid-content bg-purple">
                <el-form-item label="薪资发放：" prop="wage">
                  <el-radio-group v-model="form.wage">
                    <el-radio :label="0">按时发放</el-radio>
                    <el-radio :label="1">拖延发放</el-radio>
                    <el-radio :label="2">欠薪</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
            <!-- 社保-->
            <el-col :span="12" :xs="24">
              <div class="grid-content bg-purple-light">
                <el-form-item label="社保情况：" prop="socialSecurity">
                  <el-radio-group v-model="form.socialSecurity">
                    <el-radio :label="0">按时上</el-radio>
                    <el-radio :label="1">不按时上</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <!-- 公积金情况-->
            <el-col :span="12" :xs="24">
              <div class="grid-content bg-purple">
                <el-form-item label="休息制度：" prop="weekendsClosed">
                  <el-radio-group v-model="form.weekendsClosed">
                    <el-radio :label="0">双休</el-radio>
                    <el-radio :label="1">单休</el-radio>
                    <el-radio :label="2">大小周</el-radio>
                    <el-radio :label="3">一天半</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" :xs="24">
              <div class="grid-content bg-purple-light">
                <el-form-item label="公积金情况" prop="reserveFund">
                  <el-radio-group v-model="form.reserveFund">
                    <el-radio :label="0">有</el-radio>
                    <el-radio :label="1">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :xs="24">
              <div class="grid-content bg-purple">
                <el-form-item label="加班情况：" prop="overtimesSituation">
                  <el-radio-group v-model="form.overtimesSituation">
                    <el-radio :label="0">根据项目加班</el-radio>
                    <el-radio :label="1">经常强制加班</el-radio>
                    <el-radio :label="3">不加班</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light"></div>
            </el-col>
          </el-row>
          <!--详情描述-->
          <el-row>
            <el-col :span="24" :xs="24">
              <div class="grid-content bg-purple">
                <el-form-item label="详情描述：">
                  <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}" maxlength="500"
                            show-word-limit
                            @input="timeEffectInput"
                            v-model="form.detailedDescription"
                            placeholder="请输入详情描述"
                            clearable></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">添 加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--    <footer-index class="footer"></footer-index>-->
  </div>
</template>
<script>
import headerCom from "@/components/headerCom/index.vue";
import {addCompany, address, zhiWei} from "@/api";

export default {
  name: "indexPage",
  components: {
    headerCom
  },
  data() {
    return {
      provinceId: '',
      cityId: '',
      rules: {
        companName: [
          {required: true, message: '请填写公司名称', trigger: 'blur'}
        ],
        wage: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        overtimesSituation: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        reserveFund: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        weekendsClosed: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        socialSecurity: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
      },
      // 获取城市  数据
      // 自己的
      myArea: [],
      mycityQuery: [],
      myareaQuery: [],
      myprovince: "",
      mycity: '',
      myarea: "",
      value: null,
      form: {
        provinceId: '',
        cityId: '',
        province: '',
        city: '',
        // 城市
        enterpriseAddress: '',
        //发布用户的id
        //曾任职位
        youWork: '',
        // 企业名称
        companName: '',
        // 存在问题
        thereProblem: '',
        // 详情描述
        detailedDescription: '',
        // 工资情况
        wage: '',
        // 社保情况
        socialSecurity: '',
        //加班情况
        overtimesSituation: '',
        //单双休情况
        weekendsClosed: '',
        // 公积金情况
        reserveFund: '',
        companyRating: 0
      },
      // 获取职位
      zhiweiList: '',
      sheng: '',
      shi: ''
    }
  },
  created() {
    this.getArr()
    this.getzhiweiList()
  },
  methods: {
    timeEffectInput() {
      const length = this.form.detailedDescription.length  // 先拿到当前输入时文本域文字长度
      if (length >= 500) {  // 当长度超过200
        // 获取文本域计数统计设置字体为红色
        this.$el.querySelector('.el-input__count').style = 'color:red !important'
        // 防止后续输入溢出截取0-200的字符
        this.form.detailedDescription = this.form.detailedDescription(0, 500)
      } else {
        // 不超过则设置为原字体颜色
        this.$el.querySelector('.el-input__count').style = 'color:#909399 !important'
      }
    },
    // 获取职位列表
    getzhiweiList() {
      zhiWei().then(res => {
        console.log(res, 'list')
        this.zhiweiList = res.data;
      })
    },
    // 获取省市接口
    getArr() {
      address().then(res => {
        this.myArea = res.data
      })
    },
    // element
    handleChangesheng(value) {
      this.provinceId = value.value
      this.sheng = value.label
      this.mycity = null
    },
    handleChangeshi(value) {
      this.shi = value.label
      this.cityId = value.value
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.provinceId = this.provinceId
          this.form.cityId = this.cityId
          this.form.province = this.sheng
          this.form.city = this.shi
          this.form.companyRating = this.value * 2
          addCompany(this.form).then(res => {
            if (res.code == 200) {
              console.log(res.code)
              this.$message({
                dangerouslyUseHTMLString: true,
                message: '<strong style="margin-right: 100px">发布成功！</strong>',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.push({
                  path: '/entcom'
                })
              }, 1000)
            } else if (res.code == 401) {
              this.$message({
                dangerouslyUseHTMLString: true,
                message: '<strong style="margin-right: 100px">未登录！</strong>',
                type: 'error'
              });
              this.$router.push({
                path: "/login"
              })
            } else {
              console.log(500, res.code)
              this.$message({
                dangerouslyUseHTMLString: true,
                message: res.msg,
                type: 'error'
              });
            }
          })
        }
      })


    }
  },
  watch: {
    myprovince: function (newValue) {
      this.mycityQuery = [],
          this.myareaQuery = [],
          this.myArea.forEach((item) => {
            if (newValue.value === item.value) {
              this.mycityQuery = item.children
            }
          })
    },
  },
}
</script>
<style scoped>
::v-deep .el-rate {
  line-height: 2;
}

.footer {
  font-size: 14px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.divi-der {
  margin: 0 !important;
}

.radios {
  border-radius: 10px;
}

.whiteBox {
  padding: 10px;
  background-color: white;
}

.title {
  font-size: 20px;
}

.main {
  width: 80%;
}

.app-box {
  width: 1250px;
  margin: 0 auto;
}

.box {
  background-color: whitesmoke;
  margin: 0 auto;
}

.paddingBox {
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .app-box {
    width: 80%;
    margin: 0 auto;
  }

  .footer {
    display: none;
  }
}
</style>